<script setup lang="ts">
import useModelStore from "@/stores/modules/useModelStore.ts";

const {getVisible, modalIconStyle, getStatus, getContent, getTitle, setBtn, getLoading} = useModelStore()

const handleOk = () => {
  setBtn('ok')
}

const handleCancel = () => {
  setBtn('cancel')
}
</script>

<template>
  <a-modal
      :visible="getVisible()"
      :closable="false"
      @ok="handleOk"
      @cancel="handleCancel"
      :ok-loading="getLoading()"
  >
    <template #title>
      <div class="title">
      <span style="margin-right: 8px">
        <icon-info-circle-fill v-if="getStatus() === 'info'" :style="modalIconStyle" />
        <icon-exclamation-polygon-fill v-if="getStatus() === 'warning'" :style="modalIconStyle" />
        <icon-check-circle-fill v-if="getStatus() === 'success'" :style="modalIconStyle" />
        <icon-close-circle-fill v-if="getStatus() === 'danger'" :style="modalIconStyle" />
      </span>
        <span>{{ getTitle() }}</span>
      </div>
    </template>
    <div>{{getContent()}}</div>
  </a-modal>
</template>

<style scoped lang="scss">

</style>